<template>
	<view class="content detail" v-if="loading">
		<!-- <topLogo></topLogo> -->
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400" indicator-active-color="#fff">
				<swiper-item class="swiper-item" v-for="(item,index) in bigImages" :key="index">
					<view class="image-wrapper">
						<image :src="$public.imgageUrl(item)" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="mian-top-bg">

		</view>
		<uni-group top="0">
			<uni-row class="price">
				<uni-col :span="12">
					<view class="red uni-mr-4">¥{{modelSelect.money}}+{{modelSelect.price}}积分</view>
				</uni-col>
				<uni-col :span="12">
					<view class="salse">原价:{{modelSelect.market_price}}</view>
				</uni-col>
				<uni-col :span="24">
					<view class="kucun">
						库存: {{modelSelect.inventory}}
					</view>
				</uni-col>
				<uni-col :span="24">
					<view class="summary">
						{{detailData.title}}
					</view>
				</uni-col>
			</uni-row>
			<!-- <view class="divider"></view> -->

		</uni-group>
		<uni-list-item :title="guigetext" showArrow class="xuanguige" clickable @click="toggleSpec" />
		<!-- <view class="guige">
			<view class="left" @click="toggleSpec()">
				<text class="xiao">规格</text>
				<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
					{{sItem.title}} <text v-if="(sIndex+1)!=specSelected.length">/</text>
				</text>
			</view>
			<view class="right">
				<uni-number-box v-model="buyValue.num" />
			</view>
		</view> -->
		<view class="detail-desc">
			<rich-text :nodes="detailData.content"></rich-text>
		</view>
		<!-- <view class="goods-carts">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view> -->
		<view class="page-bottom">
			<view class="page-bottom-l">
				<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
					<!-- <uni-icons type="home" size="24"></uni-icons> -->
					<image src="../../static/sj_wljfimg1.png" mode="scaleToFill" class="navimage"></image>
					<text>首页</text>
				</navigator>
				<button open-type="contact" class="p-b-btn">
					<image src="../../static/sj_wljfimg2.png" mode="scaleToFill" class="navimage"></image>
					<text>客服</text>
				</button>
				<button open-type="share" type="default" class="p-b-btn">
					<image src="../../static/sj_wljfimg3.png" mode="scaleToFill" class="navimage"></image>
					<text>分享</text>
				</button>
			</view>

			<view class="action-btn-group">
				<!-- <button type="primary" class=" action-btn  no-border add-cart-btn"
					@click="buttonClick({index:0})">加入购物车</button> -->
				<button type="primary" class=" btncss" @click="buttonClick({index:1})">立即兑换</button>
			</view>
		</view>

		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="$public.imgageUrl(modelSelect.picture)">
					</image>
					<view class="right">
						<text class="price">¥<text style="font-size: 48rpx;">{{modelSelect.money}}</text><text
								style="font-size: 32rpx;">+</text><text style="font-size: 40rpx;">{{modelSelect.price}}</text>积分</text>
						<text class="stock">原价：{{modelSelect.market_price}}</text>
						<text class="selected">库存：{{modelSelect.inventory}}</text>
						<!-- <view class="selected">
							已选：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
								{{sItem.title}}
							</text>
						</view> -->
					</view>
				</view>
				<view v-for="(item,index) in specList" :key="index" class="attr-list">
					<!-- <text>{{item.title}}</text> -->
					<text>规格</text>
					<view class="item-list">
						<text v-for="(childItem, childIndex) in item.child" :key="childIndex" class="tit" v-if="childItem.checked"
							:class="{selected: childItem.selected}" @click="selectSpec(index,childIndex)">
							{{childItem.title}}
						</text>
					</view>
				</view>
				<view class="sl-div">
					<view class="sl-div-l">
						数量
					</view>
					<view class="sl-div-r">
						<uni-number-box v-model="buyValue.num" class="numcss" background="#DF686A" color="#fff" />
					</view>
				</view>
				<button class="btncss" @click="toggleSpec">确定</button>

			</view>
		</view>
		<!-- <button open-type="contact" class="inkefu">进入客服</button> -->
		<!-- 	<uni-popup ref="popup" background-color="#fff" type="bottom">
			<button open-type="contact" class="contactBtn">进入客服</button>
		</uni-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productId: 1,
				detailData: {
					title: "",
					content: ""
				},
				bigImages: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				buyValue: {
					num: 1
				},
				options: [{
					icon: 'cart',
					text: '购物车',
				}, {
					icon: 'star',
					text: '客服',
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ffa200',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ff0000',
						color: '#fff'
					}
				],
				specClass: 'none',
				specSelected: [],
				specList: [],
				modelValue: {},
				modelSelect: {
					inventory: "",
					market_price: "",
					picture: "",
					price: "",
					money: ""
				},
				isCollection: false,
				bugNum: "",
				guigetext: "请选择规格",
				loading: false,
				userData: null,
				typeId: 1,
				fx: {
					title: "",
					image: ""
				}
			}
		},
		onLoad(options) {
			this.$public.showLoading()
			if (options.productId)
				this.productId = options.productId
			this.getProductDetail()
			// this.getCollectionDetail()
			// this.getCartList()
		},
		methods: {
			async getCartList() {
				this.$public.htmlPost("/api/getCartList").then((res) => {
					this.bugNum = res.data.data.length
				})
			},
			getProductDetail() {
				let that = this
				uni.request({
					url: this.baseUrl + "/api/getProductDetail",
					data: {
						productId: that.productId
					},
					success(e) {
						console.log("getProductDetail", e)
						let data = e.data;
						if (data.code == 0) {
							data.data.content = that.$public.formatRichText(data.data.content.replace(new RegExp(
									"/profile/upload/", "g"), that
								.baseUrl +
								"/profile/upload/"))
							that.detailData = data.data
							that.bigImages = data.data.bigImage.split(",")
							let model = JSON.parse(that.detailData.model)
							that.specList = model.model
							that.modelValue = model.modelValue
							that.fx.image = data.data.smallImage
							that.fx.title = data.data.title
							// console.log("modelValue", that.modelValue)
							//规格 默认选中第一条
							that.specList.forEach((item, index) => {
								// console.log("index", index)
								// console.log("item", item)
								item.child[0].selected = true;
								that.selectSpec(index, 0);
							})
							that.loading = true
							uni.hideLoading();
							// that.showModelSelect();
						}

					}
				})
			},
			showModelSelect() {
				let id = this.specSelected.map(e => {
					return e.id
				}).join("-")

				this.modelSelect.inventory = this.modelValue[`skus0${id}00inventory0`];
				this.modelSelect.market_price = this.modelValue[`skus0${id}00market_price0`];
				this.modelSelect.picture = this.modelValue[`skus0${id}00picture0`];
				this.modelSelect.price = this.modelValue[`skus0${id}00price0`];
				this.modelSelect.money = this.modelValue[`skus0${id}00money0`];
			},
			getCollection() {
				this.$public.htmlPost("/api/getCollection", {
					productId: this.productId
				}).then((res) => {
					// console.log("收藏", res)
				})
			},
			getCollectionDetail() {
				if (!this.$public.isLogin())
					return false
				let that = this
				this.$public.htmlPost("/api/getCollectionDetail", {
					productId: this.productId
				}).then((res) => {
					// console.log("收藏", res)
					this.isCollection = res.data.data > 0
					// that.changeCollection()
				})
			},
			changeCollection() {
				if (this.isCollection) {
					let uni_icons = document.getElementsByClassName('uni-icons')
					uni_icons[1].style.color = 'red'
					let text = document.getElementsByClassName('uni-tab__text')
					text[1].style.color = 'red'
					this.isCollection = false
				} else {
					let uni_icons = document.getElementsByClassName('uni-icons')
					uni_icons[1].style.color = '#646566'
					let text = document.getElementsByClassName('uni-tab__text')
					text[1].style.color = '#646566'
					this.isCollection = true
				}
			},
			async onClick(e, content) {
				// console.log(e)
				if (!this.$public.isLoginUrl())
					return false
				if (e.index == 1) {
					this.$refs.popup.open()
					// this.getCollection()
					// this.changeCollection()
					// const page = getCurrentPages();
					// console.log("page", page)
					// const element = await page[page.length - 1].$('.contactBtn')
					// await element.tap()
				} else {
					uni.switchTab({
						url: `/pages/buy/index`
					})
				}
			},
			async buttonClick(e) {
				let that = this
				// console.log(e)
				// uni.showModal({
				// 	title: "温馨提示",
				// 	content: "功能正在完善中，尽情期待"
				// })
				// return false
				// if (e.index == 1) {
				// console.log(e)
				let userData = await this.$public.htmlPost("/api/getUserInfo");
				if (userData.data.code != 0) {
					this.$api.msg("请先登录");
					return false
				}
				if ((userData.data.data.allScore + userData.data.data.useScore) < this.modelSelect.price * this.buyValue.num) {
					uni.showModal({
						title: "温馨提示",
						content: "您的积分不足，请先去答题获取足够积分",
						confirmText: "赚取积分",
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								that.$public.switchTabTo("/pages/gongyi/index")
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
					return false
				}
				// console.log("userData", userData);

				// return false
				let model = this.specSelected.map(x => {
					return x.id
				}).join("-");
				let goodsData = [{
					productId: this.productId,
					num: this.buyValue.num,
					model: model,
					params: {
						product: {
							productId: this.detailData.productId,
							title: this.detailData.title
						}
					},
					title: this.detailData.title,
					image: this.modelSelect.picture,
					attr_val: this.specSelected.map(x => {
						return x.title
					}).join("/"),
					price: this.modelSelect.price,
					stock: 100,
					cartId: 0,
					money: this.modelSelect.money,
					typeId: this.typeId
				}]
				this.$public.navto(`/pages/order/createOrder`, {
					data: JSON.stringify({
						goodsData: goodsData
					})
				})
				// } else {
				// 	this.addBuyCart()
				// }
			},
			async getUserInfo() {
				this.$public.htmlPost("/api/getUserInfo").then((res) => {
					let data = res.data
					if (data.code == 0) {
						this.userData = data.data
					}
				})
			},
			//添加购物车
			addBuyCart() {
				if (!this.$public.isLoginUrl())
					return false
				let model = this.specSelected.map(x => {
					return x.id
				}).join("-");
				this.$public.htmlPost("/api/addBuyCart", {
					productId: this.productId,
					num: this.buyValue.num,
					model: model
				}).then((res) => {
					// console.log("添加购物车", res)
					this.$api.msg(res.data.msg)
					this.getCartList()
				})
			},
			//规格弹窗开关
			toggleSpec() {
				if (this.specClass === 'show') {
					this.specClass = 'hide'
					setTimeout(() => {
						this.specClass = 'none'
					}, 250)
				} else if (this.specClass === 'none') {
					this.specClass = 'show'
				}
			},
			//选择规格
			selectSpec(index, childIndex) {
				let list = this.specList
				list[index].child.forEach(item => {
					this.$set(item, 'selected', false)
				})
				this.$set(list[index].child[childIndex], 'selected', true)
				this.specSelected = []
				this.guigetext = ""
				list.forEach(item => {
					item.child.forEach(citem => {
						if (citem.selected === true) {
							this.specSelected.push(citem)
							this.guigetext += citem.title + "/"
						}
					})
				})
				this.guigetext = "已选规格 " + this.guigetext.substring(0, this.guigetext.length - 1)
				this.showModelSelect()
			},
			stopPrevent() {},

		},
	}
</script>

<style lang="scss" scoped>
	.detail {
		background: #f5f5f5;

		.mian-top-bg {
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, #FFFFFF 100%);

			border-radius: 40rpx 40rpx 0rpx 0rpx;
			height: 30rpx;
			width: 100%;
			margin-top: -30rpx;
			position: relative;
			z-index: 10;
		}

		.carousel {
			height: 554rpx;
			position: relative;

			swiper {
				height: 100%;
			}

			.image-wrapper {
				width: 100%;
				height: 100%;
			}

			.swiper-item {
				display: flex;
				justify-content: center;
				align-content: center;
				height: 750upx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}


		.red {
			color: #ff0000;
			font-size: 30rpx;
			font-weight: bold;
		}

		.salse {
			text-decoration: line-through;
			font-size: 26rpx;
			color: #999999;
			text-align: right;
		}

		.kucun {
			font-size: 28rpx;
			color: #222222;
			// text-align: right;
			width: 100%;
			padding: 30rpx 0;
		}

		.summary {
			color: #000;
			line-height: 1.6;
			// margin: 20upx 0;
			font-size: 32rpx;
		}

		.xuanguige {
			background: #f5f5f5;
			height: 100rpx;
			// padding-left: 30rpx;

			/deep/.uni-list-item {
				background: none;

				.uni-list-item__container {
					// padding-left: 0;
				}
			}
		}

		.guige {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.xiao {
				font-size: 20rpx;
				color: #909399;
				padding-right: 24rpx;
			}
		}

		.goods-carts {
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;
		}

		/*  详情 */
		.detail-desc {
			background: #fff;
			// margin-top: 16upx;
			padding: 45rpx 30rpx 150rpx;
			margin-bottom: 140rpx;


			.d-header {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 80upx;
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				position: relative;

				text {
					padding: 0 20upx;
					background: #fff;
					position: relative;
					z-index: 1;
				}

				&:after {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translateX(-50%);
					width: 300upx;
					height: 0;
					content: '';
					border-bottom: 1px solid #ccc;
				}
			}
		}

		/* 规格选择弹窗 */
		.attr-content {
			padding: 60rpx 30rpx 10rpx;

			.a-t {
				display: flex;
				padding-bottom: 55rpx;
				// border-bottom: $uni-wl-bottom-border;

				image {
					width: 200rpx;
					height: 200rpx;
					flex-shrink: 0;
					// margin-top: -40upx;
					border-radius: 10rpx;
					;
				}

				.right {
					display: flex;
					flex-direction: column;
					padding-left: 50rpx;
					font-size: $font-sm + 2upx;
					color: $font-color-base;
					// line-height: 42upx;

					.price {
						font-size: 24rpx;
						color: #DF686A;
						// margin-bottom: 25rpx;
						// font-weight: bold;
						// margin-top: 30rpx;
					}

					.stock {
						font-size: 24rpx;
						color: #999999;
						text-decoration: line-through
					}

					.selected-text {
						margin-right: 10upx;
						font-size: 24rpx;
						color: #888888;
					}

					.selected {
						font-size: 26rpx;
						color: #666666;
						margin-top: 60rpx;
					}


				}
			}

			.sl-div {
				display: flex;
				justify-content: space-between;
				// border-top: $uni-wl-bottom-border;
				padding: 30rpx 0;
				margin-top: 30rpx;

				.numcss {
					/deep/.uni-numbox-btns {
						border-radius: 50%;
					}

					/deep/.uni-numbox__value {
						background: #fff !important;
						color: #333 !important;
					}
				}
			}

			.attr-list {
				display: flex;
				flex-direction: column;
				font-size: $font-base + 2upx;
				color: $font-color-base;
				padding-top: 30upx;
				padding-left: 10upx;

			}

			.item-list {
				padding: 20upx 0 0;
				display: flex;
				flex-wrap: wrap;

				text {
					display: flex;
					align-items: center;
					justify-content: center;

					background: #E6E6E6;
					margin-right: 20upx;
					// margin-bottom: 20upx;
					border-radius: 40rpx;
					min-width: 220rpx;
					height: 54rpx;
					padding: 0 20upx;
					font-size: $font-base;
					color: #000000;
					font-size: 26rpx;
					// border: $uni-wl-bottom-border;
				}

				.selected {
					background: rgba(223, 104, 106, 0.1);
					color: #DF686A;
					border: 1rpx solid rgba(223, 104, 106, 0.5);
				}
			}
		}

		/*  弹出层 */
		.popup {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: 99;

			&.show {
				display: block;

				.mask {
					animation: showPopup 0.2s linear both;
				}

				.layer {
					animation: showLayer 0.2s linear both;
				}
			}

			&.hide {
				.mask {
					animation: hidePopup 0.2s linear both;
				}

				.layer {
					animation: hideLayer 0.2s linear both;
				}
			}

			&.none {
				display: none;
			}

			.mask {
				position: fixed;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				background-color: rgba(0, 0, 0, 0.4);
			}

			.layer {
				position: fixed;
				z-index: 99;
				bottom: 0;
				width: 100%;
				min-height: 40vh;
				border-radius: 10upx 10upx 0 0;
				background-color: #fff;

				.btn {
					height: 66upx;
					line-height: 66upx;
					border-radius: 100upx;
					background: $uni-color-primary;
					font-size: 40rpx;
					color: #fff;
					margin: 30upx auto 20upx;

				}
			}

			@keyframes showPopup {
				0% {
					opacity: 0;
				}

				100% {
					opacity: 1;
				}
			}

			@keyframes hidePopup {
				0% {
					opacity: 1;
				}

				100% {
					opacity: 0;
				}
			}

			@keyframes showLayer {
				0% {
					transform: translateY(120%);
				}

				100% {
					transform: translateY(0%);
				}
			}

			@keyframes hideLayer {
				0% {
					transform: translateY(0);
				}

				100% {
					transform: translateY(120%);
				}
			}
		}

		.page-bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 95;
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 140rpx;
			background: #f7f7f7;

			.navimage {
				width: 36rpx;
				height: 34rpx;
			}

			.page-bottom-l {
				display: flex;
			}

			// box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
			// border-radius: 16upx;
			uni-button {

				&.p-b-btn {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: $font-sm;
					color: $font-color-base;
					width: 96upx;
					height: 100rpx;
					margin: 0;
					padding: 0;
					line-height: 1.8;
					background: none;
				}

				&:after {
					display: none;
				}
			}

			.p-b-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: $font-sm;
				color: $font-color-base;
				width: 96upx;
				height: 100rpx;
				margin: 0;
				padding: 0;
				line-height: 1.6;
				background: none;

				&:after {
					display: none;
				}

				.yticon {
					font-size: 40upx;
					line-height: 48upx;
					color: $font-color-light;

					&.yituuu {
						margin-top: 10upx;
						line-height: 36upx;
					}
				}

				&.active,
				&.active .yticon {
					color: $uni-color-primary;
				}

				.icon-fenxiang2 {
					font-size: 42upx;
					transform: translateY(-2upx);
				}

				.icon-shoucang {
					font-size: 46upx;
				}
			}

			.action-btn-group {
				display: flex;
				width: 350rpx;
				height: 88rpx;
				border-radius: 10rpx;
				overflow: hidden;
				margin-left: 20upx;

				// position: relative;
				.btncss {
					height: 88rpx;

				}
			}
		}
	}
</style>